<script setup lang='ts'>
  import { reactive } from 'vue';
  const $emit = defineEmits(['change'])
  interface tabsQuery {
    key:number
    name:string
  }
  const props = defineProps({
    tabs:{
      type:Array<tabsQuery>,
      default:()=>[]
    }
  })
  const action = reactive({
    tabsKey:1,
  })
  const handleTabs = (item:any = {})=>{
    const { key } = item
    if(action.tabsKey == key) return
    action.tabsKey = key
    $emit('change',key)
  }
</script>
<template>
  <div class="typeTab flex-align-center">
    <div
      v-for="item in tabs"
      :class="['tab', item.key == action.tabsKey ? 'select' : '']"
      @click="handleTabs(item)"
      >{{ item.name }}
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .typeTab {
    width: 229px;
    height: 38px;
    padding: 3px 4px;
    box-sizing: border-box;
    background: var(--typeTabBackImage) left top / 100% 100% no-repeat;
    .tab {
      width: 50%;
      height: 100%;
      line-height: 32px;
      color: var(--typeTabFontColor);
      font-weight: 500;
      text-align: center;
    }
    .select {
      color: var(--typeTabSelectFontColor);
      background: var(--typeTabSelectBackImage) left top / 100% 100% no-repeat;
    }
  }
</style>